<template>
  <div class="monitor-detail-automan">
  	<div class="monitor-automan-title detail-title">
		自动站
	</div>
	<div class="monitor-automan-content detail-content">
		<div v-for="(item, index) in automan">
			<div class="content-title detail-content-title">
				{{ item.title }}
			</div>
			<div class="content-lab detail-content-lab">
				<div  v-for="(items, indexs) in item.content" :title="items.name" @click="activeDetail(item, items)" :class="{active: items.active}">
					{{ items.name }}
				</div>
			</div>
		</div>
	</div>
	<div class="monitor-automan-close detail-close" @click="closeAutoman">
		×
	</div>
	<common ref="common"></common>
  </div>
</template>

<script>
import common from '../common'
import Vue from 'vue'
import {getMonitorAutoman, HTTPG, HTTPY} from '../../mock/mockdata.js'
const autoLength = 4
export default {
	props: {
		initTime: {
			type: String,
		}
	},
	data() {
		return {
			automan: [],
			storeAuto: [],
			initialAuto: [],
			initial: true,
			lastType: '',
			lastTypeTitle: '',
			// current: {}
		}
	},
	components: {
		common
	},
	watch: {
		initTime: {
			handler: function(val, oldval) {
				this.getLastTime()
			}
		}
	},
	created() {
		this.automan = getMonitorAutoman
		this.automan.forEach((obj) => {
			obj.content.forEach((res) => {
				if(res.active){
					this.initialAuto.push(res)
					this.storeAuto.push(res)
					this.lastType = res.titleOf
					this.lastTypeTitle = res.titleOf
				}
			})
		})
	},
	methods: {
		activeDetail(data, res) {
			//console.log(res)
			this.lastType = this.storeAuto[0].titleOf

			this.lastTypeTitle = res.titleOf

			let autoArray = this.storeAuto

			data.content.forEach((obj) => {
				if(obj.type !== res.type ||obj.timeType !== res.timeType){
					obj.active = false
				}else{
					obj.active = !res.active
				}
			})

			if(!res.active){
				for(let i=0; i<this.initialAuto.length; i++){
					if(this.initialAuto[i].type === res.type && this.initialAuto[i].timeType === res.timeType){
						this.initialAuto.splice(i, 1)
						break
					}
				}
			}else{
				let arrayType = []
				for(let i=0; i<this.initialAuto.length; i++){
					arrayType.push(this.initialAuto[i].titleOf)
				}
				let index = arrayType.indexOf(res.titleOf)
				if(index !== -1){
					this.initialAuto.splice(index, 1, res)
				}else{
					this.initialAuto.push(res)
				}
			}
			//console.log(this.initialAuto)
			this.storeAuto = []
			this.storeAuto.push(res)

			this.getLastTime()
		},
		closeAutoman() {
			this.automan.forEach((obj) => {
				obj.content.forEach((res) => {
					if(res.active){
						this.storeAuto.push(res)
					}
				})
			})
			this.$emit('close-automan')
		},
		getLastTime() {
			//console.log(!this.storeAuto.active)
			if(this.storeAuto.length === 1 && (!this.storeAuto[0].active)){
				// this.$emit('grid-timechange', [], this.storeAuto)
				// 取消该要素
				if(this.lastType === this.storeAuto[0].titleOf){
					// 取消该元素时当前时间轴属于取消的元素刚好是最后一个元素时
					if(this.initialAuto.length === 0){
						this.$emit('timechange', this.storeAuto, 1)
					}else{
						// 取消该元素时当前时间轴属于取消的元素
						for(let i=0; i<this.initialAuto.length; i++){
							let endTime = this.initTime.replace(/\-/g,'').replace(/\:/g,'').replace(' ','')
							let startTime
							if(this.initialAuto[i].timeType.match('min')){
								startTime = this.$refs.common.getTimeCShow(endTime, -60)
								//console.log(startTime)
							}else if(this.initialAuto[i].timeType.match('hour')){
								startTime = this.$refs.common.getTimeCShow(endTime, -24*60)
							}else if(this.initialAuto[i].timeType.match('day')){
								startTime = this.$refs.common.getTimeCShow(endTime, -24*60*24)
							}
							startTime = startTime.replace(/\-/g,'').replace(/\:/g,'').replace(' ','')

							let urls = HTTPG.url + this.initialAuto[i].httpType + "/getSurfEleByTimeRangeAndStaID?userid="+HTTPG.userid+"&pwd=123&dataformat=json&elements=Station_Id_C,Station_name,Observtimes," + this.initialAuto[i].type + "&timeRange=["+startTime+","+endTime+"]&staIds=58444&limitCnt="+this.initialAuto[i].limitCntTime
							this.$http.get(urls)
							.then((res) => {
							  console.log('init')
								let timeArr = []
								let observtimesRank = res.body.DS
								observtimesRank.sort((a, b) => {
									if(a.Observtimes.slice(0,19) > b.Observtimes.slice(0,19)){
										return 1
									}else{
										return -1
									}
								})
								for(let k=0; k<observtimesRank.length; k++){
									timeArr.push(observtimesRank[k].Observtimes)
								}
								// timeArr.sort(this.$refs.common.compare('Observtimes'))
								let middleArr = []
								if(this.initialAuto[i].name.match('实时')){
									for(let i=0; i<timeArr.length; i++){
										if(timeArr[i].slice(14,16) % 5 === 0){
											middleArr.push(timeArr[i])
										}
									}
								}else{
									middleArr = timeArr
								}
								if(!this.initialAuto[i].timeArr){
									Vue.set(this.initialAuto[i], 'timeArr', middleArr)
								}else{
									this.initialAuto[i].timeArr = middleArr
								}
								this.doTime(this.initialAuto, 'fresh')
							},(err) => {
								//console.log(err)
							})
						}
					}
				}else{
					this.$emit('timechange', this.storeAuto, 1)
				}
			}else{
				// 初始化时以及添加元素或者切换元素一般会进入
				for(let i=0; i<this.storeAuto.length; i++){
					let endTime = this.initTime.replace(/\-/g,'').replace(/\:/g,'').replace(' ','')
					let startTime
					if(this.storeAuto[i].timeType.match('min')){
						startTime = this.$refs.common.getTimeCShow(endTime, -60)
						//console.log(startTime)
					}else if(this.storeAuto[i].timeType.match('hour')){
						startTime = this.$refs.common.getTimeCShow(endTime, -24*60)
					}else if(this.storeAuto[i].timeType.match('day')){
						startTime = this.$refs.common.getTimeCShow(endTime, -24*60*24)
					}
					startTime = startTime.replace(/\-/g,'').replace(/\:/g,'').replace(' ','')

					let urls = HTTPG.url + this.storeAuto[i].httpType + "/getSurfEleByTimeRangeAndStaID?userid="+HTTPG.userid+"&pwd=123&dataformat=json&elements=Station_Id_C,Station_name,Observtimes," + this.storeAuto[i].type + "&timeRange=["+startTime+","+endTime+"]&staIds=58453&limitCnt="+this.storeAuto[i].limitCntTime
					this.$http.get(urls)
					.then((res) => {
					  console.log('lsfwe')
						let timeArr = []
						let observtimesRank = res.body.DS
						observtimesRank.sort((a, b) => {
							if(a.Observtimes.slice(0,19) > b.Observtimes.slice(0,19)){
								return 1
							}else{
								return -1
							}
						})
						//console.log(observtimesRank)
						for(let k=0; k<observtimesRank.length; k++){
							timeArr.push(observtimesRank[k].Observtimes)
						}
						let middleArr = []
						if(this.storeAuto[i].name.match('实时')){
							for(let i=0; i<timeArr.length; i++){
								if(timeArr[i].slice(14,16) % 5 === 0){
									middleArr.push(timeArr[i])
								}
							}
						}else{
							middleArr = timeArr
						}
						if(!this.storeAuto[i].timeArr){
							Vue.set(this.storeAuto[i], 'timeArr', middleArr)
						}else{
							this.storeAuto[i].timeArr = middleArr
						}
						this.doTime(this.storeAuto, 'add')
					},(err) => {
						//console.log(err)
					})

				}
				// if(this.storeAuto.length === 1){
				// 	if(this.storeAuto[0].gridtype){
				// 		let time = this.initTime.replace(/\-/g,'').replace(/\:/g, '').replace(' ', '')
				// 		let gridUrl = HTTPY.url + 'SURF_ZJ_CTR_MUL_HOR/getSurfEleTimeListByTime?userid='+HTTPY.userid+'&pwd=123&level=0&productcategory='+this.storeAuto[0].gridtype+'&time='+time+'&timetype=D&admincodes=330000&elements=time&limitcnt=100&dataformat=json'
				// 		this.$http.get(gridUrl)
				// 		.then((res) => {
				// 			let timeArr = []
				// 			for(let i=0; i<res.body.DS.length; i++){
				// 				timeArr.push(res.body.DS[i].time)
				// 			}
				// 			this.$emit('grid-timechange', timeArr, this.storeAuto[0])
				// 		},(err) => {
				// 			//console.log(err)
				// 		})
				// 	}else{
				// 		this.$emit('grid-timechange', [], this.storeAuto[0])
				// 	}
				// }else{
				// 	this.$emit('grid-timechange', [], this.storeAuto)
				// }
			}
		},
		doTime(data, type){
			let num = 0
			for(let i=0; i<data.length; i++){
				if(data[i].timeArr){
					num ++
				}
			}
			if(type === 'fresh'){
				if(num === data.length){
					this.$emit('timechange',data, 3)
				}
			}else if(type === 'add'){
				if(num === data.length){
					this.$emit('timechange',data, 2)
				}
			}
			// 1、取消该元素，时间轴无影响 2、切换时间轴  3、取消该元素，时间轴需要重新根据剩下元素重画
		},
		checktimetitle(res) {
			//console.log(res)
			let current = []

			for(let i=0; i<this.automan.length; i++){
				if(res.name.match(this.automan[i].title)){
					this.lastTypeTitle = this.automan[i].title
					for(let k=0; k<this.automan[i].content.length; k++){
						if(this.automan[i].content[k].active){
							this.storeAuto = []
							this.storeAuto.push(this.automan[i].content[k])
							this.getLastTime()
							break;
						}
					}
				}
			}
		},
		closetimetitle(res) {
			for(let i=0; i<this.automan.length; i++){
				if(res.name.match(this.automan[i].title)){
					for(let k=0; k<this.automan[i].content.length; k++){
						if(this.automan[i].content[k].type === res.typedetail &&res.name.match(this.automan[i].content[k].name)){
							this.activeDetail(this.automan[i], this.automan[i].content[k])
							break;
						}
					}
					break;
				}
			}
		}
	}
}
</script>

<style lang="less">
</style>
